<template>

    <div class="qq" @click="fn">
        <div class="tp"><img :src="showImage"></div>
        <div class="rr">
            <p class="one">{{showName}}</p>
            <p class="two">{{ad}} {{showAddress}}</p>
            <p class="time">{{TT}}</p>
            <p class="oo">￥{{showPrice}}元</p>
        </div>
    </div>

    
</template>

<script>

    export default {
        name:"TpCome",
        props:{
           showName:String, 
           showAddress:String,
           showPrice:String,
           showTime:String,
           showImage:String,
           showId:String,
        },
        data() {
            return {
                Time : this.showTime + '',
                add : this.showAddress + '',
                index : '' ,
                id: this.showId,
            }
        },
        computed:{
            TT(){
                let times = this.Time.substr(0,10); 
                return `${times}`
            },
            ad(){
                let dd = this.add.substr(0,2); 
                return `${dd}`
            },
        },
        methods: {
            fn(){
                this.$router.push({
                    name:'show',
                    params: {
                        id: this.id,
                    }
                });
            }
        }

    }
</script>

<style lang="scss" scoped>
p,span{
    text-align: left;
}
.goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
.qq:hover{
    box-shadow: 5px 5px 10px grey;
}
      .qq{
          transition: all .5s;
          margin-top: 3vw;
          width: 100%;
          display: flex;
          overflow: hidden;
            margin-top: 8vw;
          .tp{
              width: 35%;
              margin-left: 5vw;
              margin-right: 5vw;
                img{
                    width: 35vw;
                    height: 23vh;
                }
          }
         
          .rr{
            margin-right: 5vw;
            height: 100%;
            position: relative;
            .one{
                font-weight: bold;
                font-size: 5vw;
                color: black;
            }
            .two{
                font-size: 4vw;
                padding-top: 7vw;
                color: #aaa;
            }
            .time{
                font-size: 4vw;
                padding-top: 3vw;
                color: #aaa;
            }
            .oo{
                position: absolute;
                top: 42vw;
                font-size: 5vw;
                color: red;
                font-weight: bold;
            }
          }
      }
</style>